<template>
  <el-form class="search-form" ref="formRef" v-bind="$attrs" v-on="$attrs">
    <slot></slot>
  </el-form>
</template>
<script lang="ts">
export default {
  name: 'FIForm',
}
</script>
<script lang="ts" setup>
import { ref } from 'vue'
import type { FormInstance } from 'element-plus'

// defineProps({
//   formValue: {
//     type: Object,
//   },
//   // rules: {
//   //   type: Object,
//   // },
// })

// 将表单绑定的ref暴露给父组件
const formRef = ref<FormInstance>()
defineExpose({ formRef })
</script>
<style lang="less" scoped>
.search-form {
  padding: 10px;
  border-radius: 2px;
  background: #fff;
  ::v-deep(.el-form-item) {
    .el-form-item__label {
      width: 100px;
    }
    .el-form-item__content {
      width: 224px;
    }
  }
  ::v-deep(.el-input .el-input__wrapper) {
    width: 224px;
  }
}
.search-form__close {
  height: 40px;
  max-height: 40px;
  overflow: hidden;
}
.search-form__btn {
  text-align: right;
  color: var(--el-color-primary);
  .search-form__btn-collapse {
    margin-left: 10px;
    padding: 0 10px;
    cursor: pointer;
    &:hover {
      background: var(--el-color-primary-light-8);
      border-radius: 4px;
    }
  }
  ::v-deep(.el-form-item) {
    .el-form-item__content {
      width: 210px;
    }
  }
}
.search-form__btn-open {
  background: #fff;
  position: absolute;
  top: 0;
  right: 10px;
  width: 33%;
}
</style>
